<template>
  <div class="vue-baidu-map">
    <baidu-map class="map" :center="center" :zoom="8">
      <bm-polyline
        :path="polylinePath"
        stroke-color="#b53af6"
        :stroke-opacity="0.5"
        :stroke-weight="3"
        :editing="false"
      ></bm-polyline>
      <bm-driving :start="polylinePath[0]" :end="polylinePath[polylinePath.length - 1]"  :panel="false" ></bm-driving>
  <bml-lushu
      @stop="play = false"
      :path="polylinePath"
      :icon="icon"
      :speed="speed"
      :play="play">
    </bml-lushu>
    <div class="play-over">
      <div class="btn play" @click="play = true">开始</div>
      <div class="btn over" @click="play = false;">暂停</div>
    </div>
  </baidu-map>

  </div>
</template>

<script>
import { BmlLushu } from 'vue-baidu-map'
import { getVehiclePathByDate } from '@/api/gov/home/index'
import { Toast } from 'vant'
export default {
  components: { BmlLushu },
  props: ['vehicleNo', 'vehicleColor', 'start', 'end'],
  data () {
    return {
      play: false,
      speed: 4000,
      icon: {
        url: require('../assets/images/car.png'),
        size: { width: 32, height: 32 }
      },
      center: {},
      polylinePath: [] // 折线点坐标集合
    }
  },
  mounted () {
    this.reload()
  },
  methods: {
    reload () {
      getVehiclePathByDate({
        vehicleNo: this.vehicleNo,
        vehicleColor: this.vehicleColor,
        start: this.start,
        end: this.end
      }).then(res => {
        console.log(res, '14天车辆轨迹')
        if (res.data.errcode !== 0) return Toast.fail(res.data.errmsg)
        if (res.data.data.error == 1) {
          Toast.fail(res.data.data.errorMsg)
          return
        }
        if (res.data.data.datas.length == 0) {
          Toast.fail('未查询到数据!')
          this.$emit('clear')
          return
        }
        res.data.data.datas.forEach(i => {
          i.lng = i.lon
        })
        this.center = res.data.data.datas[0]
        this.speed = res.data.data.datas.length * 50
        this.polylinePath = res.data.data.datas
      })
    }
  }
}
</script>
<style lang="less" scoped>
.vue-baidu-map{
  width: 100%;
  height: 100%;
  position: relative;
  /deep/.anchorBL{
    display: none;
  }
  .map{
    width: 100%;
    height: 100%;
    position: relative;
  }
  .play-over{
    width: 100%;
    position: absolute;
    top: 0;
    display: flex;
    justify-content: space-between;
  }
  .btn{
    width: 180px;
    height: 80px;
    background: rgba(0, 0, 0, .5);
    color: white;
    z-index: 2022;
    font-size: 32px;
    display: flex;
    justify-content: center;
    align-items: center;
  }
  .play{
    left: 0;
  }
  .over{
    right: 0;
  }
}
</style>
